<template >
        <div ref="chartDom" class="chars-box">
                
        </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
const chartDom = ref(null);

onMounted(()=>{
   const myChart = echarts.init(chartDom.value);
  myChart.showLoading();
  axios.get("/api/getMapData").then(async geoJson=>{
    // console.log('geoJson', geoJson);
    const {data:{data:{mapData}}} = geoJson;
    echarts.registerMap("china", mapData);
  
    const chartObj =  await getMapData().catch(err=>err);
    const option =  getChartData(chartObj);
    myChart.hideLoading();
    console.log('option',option)
    myChart.setOption(option);
  })
  // 根据窗口窗口 刷新图表尺寸
  window.addEventListener('resize',()=>{
    myChart.resize();
  })
  
})
// 模拟网络接口请求
const getMapData = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
       const tempData = [
        {
          name: "陶公岛",
          value: [87.2236, 40.5883, 729],
        },
        {
          name: "小普陀",
          value: [113.3893, 19.0516, 766],
        },
        {
          name: "动物园",
          value: [90.11, 27.97, 444],
        },
        {
          name: "liaoning",
          value: [123.1238, 42.1216, 666],
        },
        ];
        const geoCoordMap = {
          台湾: [121.5135, 25.0308],
          黑龙江: [127.9688, 45.368],
          内蒙古: [110.3467, 41.4899],
          
          山西: [112.3352, 37.9413],
          陕西: [109.1162, 34.2004],
          甘肃: [103.5901, 36.3043],
          宁夏: [106.3586, 38.1775],
          青海: [101.4038, 36.8207],
          新疆: [87.9236, 43.5883],
          西藏: [91.11, 29.97],
          
          云南: [102.9199, 25.4663],
          广东: [113.12244, 23.009505],
          广西: [108.479, 23.1152],
          海南: [110.3893, 19.8516],
          上海: [121.4648, 31.2891],
        };
        const data = [
          { name: "北京", value: 199 },
          { name: "天津", value: 42 },
          { name: "河北", value: 102 },
          { name: "山西", value: 81 },
          { name: "内蒙古", value: 47 },
          { name: "辽宁", value: 67 },
          { name: "吉林", value: 82 },
          { name: "黑龙江", value: 123 },
          { name: "上海", value: 24 },
          { name: "江苏", value: 92 },
          { name: "浙江", value: 114 },
          { name: "安徽", value: 109 },
          { name: "福建", value: 116 },
          { name: "江西", value: 91 },
          { name: "山东", value: 119 },
          { name: "河南", value: 137 },
          { name: "湖北", value: 116 },
          { name: "湖南", value: 114 },
          { name: "重庆", value: 91 },
          { name: "四川", value: 125 },
          { name: "贵州", value: 62 },
          { name: "云南", value: 83 },
          { name: "西藏", value: 9 },
          { name: "陕西", value: 80 },
          { name: "甘肃", value: 56 },
          { name: "青海", value: 10 },
          { name: "宁夏", value: 18 },
          { name: "新疆", value: 180 },
          { name: "广东", value: 123 },
          { name: "广西", value: 59 },
          { name: "海南", value: 14 },
        ];
        resolve({tempData,geoCoordMap, data})
    },1000)
  })
}

// 获取图表配制数据
const getChartData = (chartObj)=> {
  const {tempData, geoCoordMap, data } =  chartObj;
 const convertData = function (data) {
      let res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };

    const option = {
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#0f378f", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#00091a", // 100% 处的颜色
          },
        ],
        globalCoord: false, // 缺省为 false
      },
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          if (typeof params.value[2] == "undefined") {
            return params.name + " : " + params.value;
          } else {
            return params.name + " : " + params.value[2];
          }
        },
      },
      legend: {
        orient: "vertical",
        y: "bottom",
        x: "right",
        data: ["pm2.5"],
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: "left",
        top: "bottom",
        text: ["高", "低"], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {},
      },
      geo: {
        map: "china",
        show: true,
        roam: true,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#3a7fd5",
            borderColor: "#0a53e9", //线
            shadowColor: "#092f8f", //外发光
            shadowBlur: 20,
          },
          emphasis: {
            areaColor: "#0a2dae", //悬浮区背景
          },
        },
      },
      series: [
        {
          symbolSize:  (val)=> {
                  console.log('val', val[2] / 10)
          return Math.min(val[2] , 15);
        },
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true,
              opacity: 0.9
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "white",
              opacity: 1,
            },
          },
          name: "light",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: convertData(data),
        },
        {
          type: "map",
          map: "china",
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#FFFFFF",
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
          animation: false,
          data: data,
        },
        {
          name: "Top 5",
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "pin",
          symbolSize: [50, 50],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
              formatter(value) {
                return value.data.value[2];
              },
            },
          },
          itemStyle: {
            normal: {
              color: "red", //标志颜色
            },
          },
          data: convertData(data),
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          zlevel: 1,
        },
        {
        type: "scatter",
        coordinateSystem: "geo",
        // symbol: 'image://../image/mapPoint.png',
        legendHoverLink: true,
        symbolSize: (params)=>{
          return Math.max(params[2] / 30, 8)
        },
        // legendHoverLink: true,
        label: {
          show: false,
          offset: [70, -10], //偏移设置
          fontSize: 14,
          lineHeight: 14,
          borderWidth: 1,
          backgroundColor: "#061a4c",
          borderColor: "#97b5f0",
          padding: 6,
          formatter(value) {
            console.log(value);
            return value.data.name + "：" + value.data.value[2] + "人";
          },
          color: "#fff",
        },
        itemStyle: {
          normal: {
            color: "#D8BC37", //标志颜色
            shadowBlur: 2,
            shadowColor: "D8BC37",
          },
        },
        data: tempData,
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        zlevel: 1,
      },
      ],
    }
    return option;
}
</script>
<style lang="scss">
       .chars-box {
        width: 200px;
        height: 520px;
        border: 1px solid red;
     } 
</style>